<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RapidOCR - 智能文字识别</title>
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
    <link rel="shortcut icon" href="/static/css/favicon.ico" type="image/x-icon" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <!-- 头部区域 -->
        <header class="header">
            <div class="header-content">
                <h1 class="main-title">
                    <i class="fas fa-eye"></i>
                    RapidOCR
                    <span class="subtitle">智能文字识别</span>
                </h1>
                <div class="header-links">
                    <a href="https://github.com/RapidAI/RapidOCRWeb" class="github-link" target="_blank">
                        <i class="fab fa-github"></i>
                        Star项目
                    </a>
                    <a href="https://rapidai.github.io/RapidOCRDocs/main/install_usage/rapidocr_web/usage/"
                        class="docs-link" target="_blank">
                        <i class="fas fa-book"></i>
                        使用文档
                    </a>
                </div>
            </div>
        </header>

        <!-- 上传区域 -->
        <section class="upload-section">
            <div class="upload-container" id="uploadContainer">
                <div class="upload-area" id="uploadArea">
                    <div class="upload-icon">
                        <i class="fas fa-cloud-upload-alt"></i>
                    </div>
                    <h3 class="upload-title">粘贴剪贴板图像、拖拽图片或点击上传</h3>
                    <p class="upload-subtitle">支持 PNG、JPG、JPEG、BMP、WEBP 格式，文件大小不超过 3MB</p>
                    <button class="upload-btn" onclick="document.getElementById('rapid_ocr').click();">
                        <i class="fas fa-plus"></i>
                        选择图片
                    </button>
                    <input type="file" style="display: none;" name="pic" id="rapid_ocr" accept="image/*" />
                </div>
            </div>
        </section>

        <!-- 结果展示区域 -->
        <section class="results-section" id="resultsSection" style="display: none;">
            <div class="results-container">
                <!-- 左侧：检测结果 -->
                <div class="result-panel">
                    <div class="panel-header">
                        <div class="header-title">
                            <i class="fas fa-search"></i>
                            <span>文本检测结果</span>
                        </div>
                    </div>
                    <div class="panel-content">
                        <div class="loading-overlay" id="loadingOverlay">
                            <div class="loading-spinner">
                                <i class="fas fa-spinner fa-spin"></i>
                                <p>正在识别中...</p>
                            </div>
                        </div>
                        <img id="detect_img" src="" alt="检测结果" />
                        <div class="zoom-hint">
                            <i class="fas fa-search-plus"></i> 点击或滚轮缩放，拖拽移动图片
                        </div>
                        <div class="image-info" id="imageInfo" style="display: none;">
                            <span class="image-dimensions"></span>
                            <span class="image-size"></span>
                        </div>
                    </div>
                </div>

                <!-- 右侧：识别结果 -->
                <div class="result-panel">
                    <div class="panel-header">
                        <div class="header-title">
                            <i class="fas fa-file-text"></i>
                            <span id="rec_res">文本识别结果</span>
                            <span id="rec_time" class="total-time" style="display: none;"></span>
                        </div>
                        <div class="header-actions">
                            <button class="copy-all-btn" id="copyAllBtn" style="display: none;">
                                <i class="fas fa-copy"></i>
                                <span>复制全部</span>
                            </button>
                        </div>
                    </div>
                    <div class="panel-content">
                        <div class="table-container">
                            <table id="locTable" class="result-table"></table>
                        </div>
                        <div class="performance-stats" id="statsContainer" style="display: none;">
                            <div class="stats-header">
                                <div class="stats-title">
                                    <i class="fas fa-chart-line"></i>
                                    <span>性能统计</span>
                                </div>
                                <div class="total-performance">
                                    <span id="totalTime">0.000s</span>
                                </div>
                            </div>
                            <div class="stats-grid">
                                <div class="stat-card detection">
                                    <div class="stat-label">文本检测</div>
                                    <div class="stat-value" id="detTime">0.000s</div>
                                </div>

                                <div class="stat-card classification">
                                    <div class="stat-label">文本分类</div>
                                    <div class="stat-value" id="clsTime">0.000s</div>
                                </div>

                                <div class="stat-card recognition">
                                    <div class="stat-label">文字识别</div>
                                    <div class="stat-value" id="recTime">0.000s</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script src="{{url_for('static', filename='js/jquery-3.0.0.min.js')}}"></script>
    <script src="{{url_for('static', filename='js/app.js')}}"></script>
    <script type="text/javascript">
        // 页面加载时，执行
        var targetFile = null;
        window.onload = function () {
            // 移除图片的宽高属性，让CSS控制
            $('#detect_img').removeAttr("width").removeAttr("height");

            // 隐藏图片信息
            $('#imageInfo').hide();

            // 隐藏复制按钮
            $('#copyAllBtn').hide();

            // 绑定复制按钮事件
            $('#copyAllBtn').on('click', function () {
                copyAllResults();
            });

            // 确保函数在全局作用域中可用
            window.copyAllResults = copyAllResults;
        }

        $("#rapid_ocr").on('change', function () {
            targetFile = document.getElementById("rapid_ocr").files[0];
            requestOCR();
        });

        // 拖拽上传
        $("html").on("dragover", function (event) {
            event.preventDefault();
            event.stopPropagation();
            $(this).addClass('dragging');
        });

        $("html").on("dragleave", function (event) {
            event.preventDefault();
            event.stopPropagation();
            $(this).removeClass('dragging');
        });

        $("html").on("drop", function (event) {
            event.preventDefault();
            event.stopPropagation();
            let trans = event.originalEvent.dataTransfer;
            handleData(trans);
        });

        // 粘贴上传
        $('html').on('paste', function (e) {
            let trans = e.originalEvent.clipboardData;
            handleData(trans);
        });

        function handleData(trans) {
            if (trans.items) {
                for (let i = 0; i < trans.items.length; i++) {
                    if (trans.items[i].kind === 'file') {
                        targetFile = trans.items[i].getAsFile();
                        console.log(`handleData: items[${i}].name = ${targetFile.name}`);
                        requestOCR();
                        return;
                    }
                }
            } else {
                for (let i = 0; i < trans.files.length; i++) {
                    targetFile = trans.files[i];
                    console.log(`handleData: files[${i}].name = ${targetFile.name}`);
                    requestOCR();
                    return;
                }
            }
        }

        function requestOCR() {
            if (!targetFile) {
                return;
            }

            // 判断图像格式是否匹配
            let imageName = targetFile.name;
            let index = imageName.lastIndexOf('.');
            let extName = imageName.substr(index + 1);
            let imgArr = ['webp', 'jpg', 'bmp', 'png', 'jpeg'];
            if (!(imgArr.includes(extName.toLocaleLowerCase()))) {
                showNotification("图像文件格式不支持！", "error");
                return;
            }

            // 判断图像大小是否符合
            let imageSize = targetFile.size / 1024 / 1024;
            if (imageSize >= 3) {
                showNotification("图像大小超过3MB！", "error");
                return;
            }

            var reader = new FileReader();
            reader.onload = function (e) {
                var upload_data = { "file": reader.result };
                $.ajax({
                    url: "/ocr",
                    type: "POST",
                    data: JSON.stringify(upload_data),
                    contentType: 'application/json; charset=UTF-8',
                    dataType: 'json',

                    beforeSend: function () {
                        // 显示结果区域和加载状态
                        $("#resultsSection").show();
                        $("#loadingOverlay").show();
                        $("#statsContainer").hide();
                        $("#locTable").hide();

                        // 隐藏复制按钮并重置状态
                        $("#copyAllBtn").hide().removeClass('copied').html('<i class="fas fa-copy"></i><span>复制全部</span>');

                        // 显示原始图片，保持宽高比
                        $("#detect_img").attr('src', reader.result);
                        $("#detect_img").removeAttr("width").removeAttr("height");
                        $('#detect_img').show();

                        // 添加图片加载完成后的处理
                        $("#detect_img").on('load', function () {
                            if (typeof adjustImageSizeAdaptive === 'function') {
                                adjustImageSizeAdaptive(this);
                            }
                            // 重新初始化缩放功能
                            if (typeof addImageZoom === 'function') {
                                addImageZoom();
                            }
                        });

                        // 重置标题
                        var recResElement = document.getElementById("rec_res");
                        var recTimeElement = document.getElementById("rec_time");
                        if (recResElement) {
                            recResElement.textContent = '文本识别结果';
                            recResElement.style.display = 'inline';
                        }
                        if (recTimeElement) {
                            recTimeElement.style.display = 'none';
                        }
                    },

                    success: function (data) {
                        $("#loadingOverlay").hide();

                        if (data) {
                            if (data['image']) {
                                $("#detect_img").attr('src', 'data:image/jpeg;base64,' + data['image']);
                                $("#detect_img").removeAttr("width").removeAttr("height");
                                $('#detect_img').show();

                                // 添加图片加载完成后的处理
                                $("#detect_img").on('load', function () {
                                    if (typeof adjustImageSizeAdaptive === 'function') {
                                        adjustImageSizeAdaptive(this);
                                    }
                                    // 重新初始化缩放功能
                                    if (typeof addImageZoom === 'function') {
                                        addImageZoom();
                                    }
                                });
                            }

                            if (data["total_elapse"]) {
                                // 更新总耗时显示
                                var recTimeElement = document.getElementById("rec_time");
                                if (recTimeElement) {
                                    recTimeElement.textContent = '(总耗时: ' + String(data["total_elapse"]) + 's)';
                                    recTimeElement.style.display = 'inline';
                                }
                            }

                            if (data["rec_res"]) {
                                var rec_res = JSON.parse(data["rec_res"]);

                                if (data['elapse_part']) {
                                    var elapse_list = data['elapse_part'].split(',');
                                } else {
                                    var elapse_list = [0, 0, 0];
                                }

                                // 构建结果表格
                                var tableData = "";
                                tableData += "<thead><tr>" +
                                    '<th>序号</th>' +
                                    '<th>识别结果</th>' +
                                    '<th>置信度</th>' +
                                    "</tr></thead><tbody>";

                                for (let i = 0; i < rec_res.length; i++) {
                                    const element = rec_res[i];
                                    let num = element[0];
                                    let rec_result = element[1];
                                    let score = Number(element[2]);
                                    score = score.toFixed(4);

                                    // 根据置信度设置颜色
                                    let confidenceClass = score > 0.8 ? 'high-confidence' :
                                        score > 0.6 ? 'medium-confidence' : 'low-confidence';

                                    tableData += "<tr>"
                                    tableData += "<td class='row-number'>" + num + "</td>";
                                    tableData += "<td class='recognition-result'>" + rec_result + "</td>";
                                    tableData += "<td class='confidence-score " + confidenceClass + "'>" + score + "</td>";
                                    tableData += "</tr>"
                                }
                                tableData += "</tbody>";

                                document.getElementById("locTable").innerHTML = tableData;
                                $("#locTable").show();

                                // 显示复制按钮
                                $("#copyAllBtn").show();

                                // 更新性能统计信息
                                updatePerformanceStats(elapse_list, data["total_elapse"]);

                                // 滚动到结果区域
                                document.getElementById('resultsSection').scrollIntoView({
                                    behavior: 'smooth'
                                });
                            }
                        }
                    },

                    error: function (xhr, status, error) {
                        $("#loadingOverlay").hide();
                        showNotification("识别失败，请重试", "error");
                    }
                });
            }
            reader.readAsDataURL(targetFile)
        }

        // 调整图像尺寸，保持宽高比 - 使用新的自适应函数
        function adjustImageSize(imgElement) {
            if (typeof adjustImageSizeAdaptive === 'function') {
                adjustImageSizeAdaptive(imgElement);
            } else {
                // 降级方案
                const container = imgElement.parentElement;
                const containerWidth = container.clientWidth - 40;
                const containerHeight = 500;
                const imgWidth = imgElement.naturalWidth;
                const imgHeight = imgElement.naturalHeight;
                const scaleX = containerWidth / imgWidth;
                const scaleY = containerHeight / imgHeight;
                const scale = Math.min(scaleX, scaleY, 1);
                const newWidth = imgWidth * scale;
                const newHeight = imgHeight * scale;
                imgElement.style.width = newWidth + 'px';
                imgElement.style.height = newHeight + 'px';
                showImageInfo(imgElement);
            }
        }

        // 显示图片信息
        function showImageInfo(imgElement) {
            const imageInfo = document.getElementById('imageInfo');
            const dimensionsSpan = imageInfo.querySelector('.image-dimensions');
            const sizeSpan = imageInfo.querySelector('.image-size');

            if (imageInfo && dimensionsSpan && sizeSpan) {
                const originalWidth = imgElement.naturalWidth;
                const originalHeight = imgElement.naturalHeight;
                const displayWidth = imgElement.offsetWidth;
                const displayHeight = imgElement.offsetHeight;

                dimensionsSpan.textContent = `${originalWidth}×${originalHeight} → ${displayWidth}×${displayHeight}`;

                // 计算文件大小（如果可用）
                if (targetFile) {
                    const fileSize = (targetFile.size / 1024).toFixed(1);
                    sizeSpan.textContent = `${fileSize} KB`;
                }

                imageInfo.style.display = 'flex';
            }
        }

        // 更新性能统计信息
        function updatePerformanceStats(elapseList, totalElapse) {
            const detTime = parseFloat(elapseList[0]);
            const clsTime = parseFloat(elapseList[1]);
            const recTime = parseFloat(elapseList[2]);
            const totalTime = parseFloat(totalElapse);

            // 格式化时间显示（保留3位小数）
            $("#detTime").text(detTime.toFixed(3) + 's');
            $("#clsTime").text(clsTime.toFixed(3) + 's');
            $("#recTime").text(recTime.toFixed(3) + 's');
            $("#totalTime").text(totalTime.toFixed(3) + 's');



            // 显示统计容器
            $("#statsContainer").show();

            // 添加显示动画
            $("#statsContainer").css('opacity', '0').css('transform', 'translateY(20px)');
            setTimeout(() => {
                $("#statsContainer").css('transition', 'opacity 0.6s ease, transform 0.6s ease')
                    .css('opacity', '1').css('transform', 'translateY(0)');
            }, 200);
        }



        // 复制所有识别结果
        function copyAllResults() {
            console.log('copyAllResults function called');

            try {
                const table = document.getElementById('locTable');
                console.log('Table element:', table);

                if (!table) {
                    showNotification("找不到结果表格", "error");
                    return;
                }

                if (table.style.display === 'none') {
                    showNotification("结果表格未显示", "error");
                    return;
                }

                const rows = table.querySelectorAll('tbody tr');
                console.log('Found', rows.length, 'rows');

                if (rows.length === 0) {
                    showNotification("没有可复制的识别结果", "error");
                    return;
                }

                // 收集所有识别结果
                let allText = '';

                rows.forEach((row, index) => {
                    const textCell = row.querySelector('.recognition-result');
                    console.log('Row', index, 'textCell:', textCell);
                    if (textCell) {
                        const text = textCell.textContent.trim();
                        console.log('Row', index, 'text:', text);
                        if (text) {
                            allText += text + '\n';
                        }
                    }
                });

                // 移除最后的换行符
                allText = allText.trim();
                console.log('Final text to copy:', allText);

                if (!allText) {
                    showNotification("没有可复制的文本内容", "error");
                    return;
                }

                // 尝试使用现代API复制
                if (navigator.clipboard && navigator.clipboard.writeText) {
                    navigator.clipboard.writeText(allText).then(() => {
                        updateCopyButtonSuccess(rows.length);
                    }).catch((err) => {
                        console.log('Clipboard API failed, using fallback:', err);
                        fallbackCopy(allText, rows.length);
                    });
                } else {
                    console.log('Clipboard API not available, using fallback');
                    fallbackCopy(allText, rows.length);
                }

            } catch (error) {
                console.error('Error in copyAllResults:', error);
                showNotification("复制过程中出现错误", "error");
            }
        }

        // 降级复制方法
        function fallbackCopy(text, rowCount) {
            try {
                const textArea = document.createElement('textarea');
                textArea.value = text;
                textArea.style.position = 'fixed';
                textArea.style.left = '-999999px';
                textArea.style.top = '-999999px';
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();

                const successful = document.execCommand('copy');
                document.body.removeChild(textArea);

                if (successful) {
                    updateCopyButtonSuccess(rowCount);
                } else {
                    showNotification("复制失败，请手动选择文本", "error");
                }
            } catch (err) {
                console.error('Fallback copy failed:', err);
                showNotification("复制失败，请手动选择文本", "error");
            }
        }

        // 更新复制按钮成功状态
        function updateCopyButtonSuccess(rowCount) {
            const copyBtn = document.getElementById('copyAllBtn');
            if (copyBtn) {
                copyBtn.classList.add('copied');
                copyBtn.innerHTML = '<i class="fas fa-check"></i><span>已复制</span>';

                showNotification(`已复制 ${rowCount} 条识别结果`, "success");

                // 3秒后恢复按钮状态
                setTimeout(() => {
                    copyBtn.classList.remove('copied');
                    copyBtn.innerHTML = '<i class="fas fa-copy"></i><span>复制全部</span>';
                }, 3000);
            }
        }

        function showNotification(message, type) {
            // 创建通知元素
            const notification = document.createElement('div');
            notification.className = `notification ${type}`;
            notification.innerHTML = `
                <i class="fas fa-${type === 'error' ? 'exclamation-triangle' : 'check-circle'}"></i>
                <span>${message}</span>
            `;

            document.body.appendChild(notification);

            // 显示动画
            setTimeout(() => notification.classList.add('show'), 100);

            // 自动隐藏
            setTimeout(() => {
                notification.classList.remove('show');
                setTimeout(() => document.body.removeChild(notification), 300);
            }, 3000);
        }
    </script>
</body>

</html>